﻿import Badge from "react-bootstrap/Badge";
import Collapse from "react-bootstrap/Collapse";
import Card from "react-bootstrap/Card";
import { FormInput, FormLabel, FormSelectCreatable, FormSwitch } from "components/common/Form";
import { useFormContext, useWatch } from "react-hook-form";
import OverrideConfiguration from "./OverrideConfiguration";
import { Icon } from "components/common/Icon";
import { FlexGrow } from "components/common/FlexGrow";
import { FormDestinations } from "./utils/formDestinationsTypes";
import { useServices } from "components/hooks/useServices";
import { useAsyncCallback } from "react-async-hook";
import { mapGlacierToDto } from "./utils/formDestinationsMapsToDto";
import ButtonWithSpinner from "../ButtonWithSpinner";
import ConnectionTestResult from "../connectionTests/ConnectionTestResult";
import { availableGlacierRegions } from "components/utils/common";
import PopoverWithHoverWrapper from "../PopoverWithHoverWrapper";

export default function AmazonGlacier() {
    const { control, trigger } = useFormContext<FormDestinations>();
    const {
        destinations: { glacier: formValues },
    } = useWatch({ control });

    const { manageServerService } = useServices();

    const asyncTest = useAsyncCallback(async () => {
        const isValid = await trigger(fieldBase);
        if (!isValid) {
            return;
        }

        return manageServerService.testPeriodicBackupCredentials("Glacier", mapGlacierToDto(formValues));
    });

    return (
        <Card className="well">
            <Card.Body>
                <FormSwitch name={getName("isEnabled")} control={control}>
                    Amazon Glacier
                </FormSwitch>
                <Collapse in={formValues.isEnabled} className="vstack gap-2 mt-2">
                    <div>
                        <FormSwitch
                            name={`${fieldBase}.config.isOverrideConfig`}
                            control={control}
                            className="ms-3 w-100"
                            color="secondary"
                        >
                            Override configuration via external script
                        </FormSwitch>
                        {formValues.config.isOverrideConfig ? (
                            <OverrideConfiguration fieldBase={fieldBase} />
                        ) : (
                            <div className="vstack gap-3 mt-2">
                                <div className="mb-2">
                                    <FormLabel className="d-flex align-items-center gap-1">
                                        Vault name
                                        <PopoverWithHoverWrapper
                                            message={
                                                <>
                                                    Vault should be created manually in order for this OLAP to work. You
                                                    can use the <span className="text-info">Test credentials</span>{" "}
                                                    button to verify its existence.
                                                </>
                                            }
                                        >
                                            <Icon icon="info" color="info" margin="m-0" />
                                        </PopoverWithHoverWrapper>
                                        {asyncTest.result?.Success ? (
                                            <Badge bg="success" pill>
                                                <Icon icon="check" />
                                                Successfully connected
                                            </Badge>
                                        ) : asyncTest.result?.Error ? (
                                            <Badge bg="danger" pill>
                                                <Icon icon="warning" />
                                                Failed connection
                                            </Badge>
                                        ) : null}
                                    </FormLabel>
                                    <FormInput
                                        name={getName("vaultName")}
                                        control={control}
                                        placeholder="Enter a vault name"
                                        type="text"
                                        autoComplete="off"
                                    />
                                </div>
                                <div className="mb-2">
                                    <FormLabel>
                                        Remote folder name <small className="text-muted fw-light">(optional)</small>
                                    </FormLabel>
                                    <FormInput
                                        name={getName("remoteFolderName")}
                                        control={control}
                                        placeholder="Enter a remote folder name"
                                        type="text"
                                        autoComplete="off"
                                    />
                                </div>
                                <div className="mb-2">
                                    <FormLabel>Region</FormLabel>
                                    <FormSelectCreatable
                                        name={getName("awsRegionName")}
                                        control={control}
                                        placeholder="Select an AWS region (or enter new one)"
                                        options={availableGlacierRegions}
                                    />
                                </div>
                                <div className="mb-2">
                                    <FormLabel>Access key</FormLabel>
                                    <FormInput
                                        name={getName("awsAccessKey")}
                                        control={control}
                                        placeholder="Enter an access key"
                                        type="text"
                                        autoComplete="off"
                                    />
                                </div>
                                <div className="mb-2">
                                    <FormLabel>Secret key</FormLabel>
                                    <FormInput
                                        name={getName("awsSecretKey")}
                                        control={control}
                                        placeholder="Enter a secret key"
                                        type="password"
                                        passwordPreview
                                        autoComplete="off"
                                    />
                                </div>
                                <div className="d-flex justify-content-end">
                                    <FlexGrow />
                                    <ButtonWithSpinner
                                        type="button"
                                        variant="secondary"
                                        onClick={asyncTest.execute}
                                        isSpinning={asyncTest.loading}
                                        icon="rocket"
                                    >
                                        Test credentials
                                    </ButtonWithSpinner>
                                </div>
                                {asyncTest.result?.Error && (
                                    <div className="mt-3">
                                        <ConnectionTestResult testResult={asyncTest.result} />
                                    </div>
                                )}
                            </div>
                        )}
                    </div>
                </Collapse>
            </Card.Body>
        </Card>
    );
}

const fieldBase = "destinations.glacier";

type FormFieldNames = keyof FormDestinations["destinations"]["glacier"];

function getName(fieldName: FormFieldNames): `${typeof fieldBase}.${FormFieldNames}` {
    return `${fieldBase}.${fieldName}`;
}
